<template>
  <div class="">
    <ul class="nav">
      <!-- <li v-for="(item, index) in nav" :key="index">{{ item }}</li> -->
      <li
        @click="$store.state.flag = 'all'"
        :class="{ active: $store.state.flag == 'all' }"
      >
        全部
      </li>
      <li
        @click="$store.state.flag = 'notpay'"
        :class="{ active: $store.state.flag == 'notpay' }"
      >
        未付款
      </li>
      <li
        @click="$store.state.flag = 'pay'"
        :class="{ active: $store.state.flag == 'pay' }"
      >
        已付款
      </li>
      <li
        @click="$store.state.flag = 'send'"
        :class="{ active: $store.state.flag == 'send' }"
      >
        已发货
      </li>
      <li
        @click="$store.state.flag = 'done'"
        :class="{ active: $store.state.flag == 'done' }"
      >
        已完成
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //   nav: ["全部", "未付款", "已付款", "已发货", "已完成"],
    };
  },
  mounted() {},
  methods: {},
  components: {},
};
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  li {
    flex: 1;
    height: 30px;
    border: 1px solid #ccc;
    line-height: 30px;
    text-align: center;
  }
  .active {
    color: brown;
  }
}
</style>
